<template>
  <div class="shop-size">
    <!-- 商品规格 -->
    <div class="item_box">
      <h1 class="search_h1">规格搜索:</h1>
      <div class="search_frame">
        <el-input v-model="shop_type" placeholder="请输入商品规格">
          <svg-icon slot="append" icon-class="search" />
        </el-input>
      </div>
    </div>

    <div class="h_top">
      <el-button type="text" @click="handleClickpush"> 添加商品规格 </el-button>
      <tks
        v-show="flag2"
        @handleClickpushzu="handleClickpushzu"
        @closetks="closetks"
      />
      <el-button>批量删除</el-button>
    </div>
    <tk v-show="flag" />
    <!-- 表格 -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      border
      tooltip-effect="dark"
      style="width: 100%"
      max-height="400"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" />
      <el-table-column label="ID">
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column prop="name" label="规格名称" />
      <el-table-column prop="address" label="商品规格" />

      <el-table-column prop="attribute" label="商品属性" />
      <el-table-column prop="name" label="操作">
        <template slot-scope="scope">
          <span @click="handleClickamend(scope.row)" class="xiugai">修改</span>
          <span @click="shanchu(scope.row)" class="shanchu">删除</span>
        </template>
      </el-table-column>
    </el-table>
    <tk v-show="flag" @closetk="closetk" @handleClicktrue="handleClicktrue" />
    <!-- 分页器 -->
    <footer>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="1000"
        @current-change="handleCurrentChange"
      />
    </footer>

    <!-- 弹框 -->
  </div>
</template>

<script>
import tk from "./components/popover";
import tks from "./components/popovertwo";
import { fetchList } from "../../../api/productData";
export default {
  components: { tk, tks },
  data() {
    return {
      shop_type: "", // 商品规格
      tableData: [],
      multipleSelection: [],
      flag: false,
      flag2: false,
      arr1: "",
      arr2: "",
      arr3: "",
      name1: [],
      rels1: [],
      num1: [],
      pageIndex: 1,
      pageSize: 5,
      total: 0,
      dialogVisible: false,
      list: "",
      listQuery: {
        page: 1,
        limit: 5,
        sort: "+id",
        total: 0,
      },
    };
  },
  created() {
    console.log("aaa");
    // this.pageChange(this.pageIndex, this.pageSize);
    this.getList();
  },
  methods: {
    // 控制遮罩层显示隐藏
    isFlag() {
      this.flag = !this.flag;
    },

    shanchu(row) {
      this.tableData = this.tableData.filter((item) => {
        return item.id !== row.id;
      });
    },
    handleSelectionChange() {
      console.log(1);
    },
    handleClickamend(scope) {
      this.flag = !this.flag;
      this.list = scope;
    },
    handleClicktrue(one) {
      const data = this.tableData.map((item) => {
        if (item.id === this.list.id) {
          item = { ...item, ...one };
        }
        return item;
      });
      this.tableData = data;
      this.closetk();
    },
    handleClickpushzu(form) {
      console.log(form);
      this.tableData.push(form);
      this.flag2 = !this.flag2;
    },
    closetk() {
      this.flag = false;
    },
    getList() {
      fetchList(this.listQuery).then((res) => {
        console.log(res);
        this.tableData = res.data.items;
      });
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    handleClickpush() {
      this.flag2 = !this.flag2;
    },
    closetks() {
      this.flag2 = !this.flag2;
    },
  },
  // 添加
};
</script>
<style lang="scss">
.shop-size {
  width: 100%;
  height: auto;
  padding: 20px 20px 10px 20px;
  background: #fff;
  display: flex;
  flex-direction: column;
  position: relative;
  // 规格搜索
  .item_box {
    width: 100%;
    display: flex;
    height: 50px;
    align-items: center;
    h1 {
      font-size: 16px;
      font-weight: bolder;
      color: #626168;
      margin-right: 20px;
    }
  }
  // 添加 删除
  .h_top {
    width: 100%;
    height: 58px;
    background: #ffffff;
    line-height: 58px;
  }
  // 表格
  .el-table {
    margin-top: 10px;
  }
  // 分页器
  footer {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
  }
}

// 弹框
.mosk {
  width: 100%;
  height: 100%;
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  .s_mosk {
    width: 930px;
    height: 210px;
    background: #fff;
    position: absolute;
    border-radius: 10px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto auto;
    p {
      padding: 10px;
      font-size: 17px;
      color: #636369;
    }
    li {
      > span {
        padding: 0 20px;
        margin-left: 10px;
        font-size: 14px;
        font-weight: 800;
        color: #636369;
      }
      input {
        width: 180px;
        height: 30px;
        border: 1px solid #ebedf1;
        outline: 0;
        text-indent: 10px;
      }
    }
    ul {
      overflow: auto;
      li {
        padding: 20px 20px;
        font-size: 14px;
        font-weight: 800;
        margin-left: 38px;
        color: #636369;
        float: left;
        input {
          margin-left: 22px;
        }
      }
      .but_active {
        width: 65px;
        height: 33px;
        background: #1890ff;
        border-radius: 6px;
        display: inline-block;
        color: #fff;
        text-align: center;
        line-height: 30px;
      }
      span {
        width: 65px;
        height: 33px;
        border: 1px solid #ebedf1;
        display: inline-block;
        color: rgb(92, 92, 92);
        text-align: center;
        line-height: 33px;
        margin-left: 20px;
        margin-top: 15px;
      }
    }
    .but_active1 {
      width: 65px;
      height: 33px;
      background: #1890ff;
      border-radius: 6px;
      display: inline-block;
      color: #fff;
      text-align: center;
      line-height: 30px;
    }
    > span {
      width: 65px;
      height: 33px;
      border: 1px solid #ebedf1;
      display: inline-block;
      color: rgb(92, 92, 92);
      text-align: center;
      line-height: 33px;
      margin-left: 20px;
      margin-top: 15px;

      margin-right: 10px;
    }
  }
}
.el-table--scrollable-x .el-table__body-wrapper {
  clear: both;
  overflow: hidden;
}
.shanchu {
  color: #1890ff;
  margin-left: 20px;
}
.xiugai {
  color: #1890ff;
  margin-left: 5px;
}
</style>
